<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>华富</title>
  <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
  <link rel="stylesheet" type="text/css" href="../../css/common.css" />
  <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
  <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
  <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css"/>
  <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <style>
        html,
        body {
          font-size: 1.2rem;
          background: #ffffff;
          color: #333333 !important
        }
        #swiper_banner .swiper-pagination {
            background: rgba(0, 0, 0, 0.4);
            display: inline-block;
            color: #fff;
            width: 2.4rem;
            font-size: 0.6rem;
            border-radius: 1rem;
            right: 0.75rem;
            left: inherit;
        }

        #swiper_banner .swiper-pagination-current {
            font-size: 0.8rem;
            color: #fff;
        }

        #swiper_banner .swiper-pagination-total {
            color: #fff;
        }
        #swiper_banner .swiper-slide {
            height: 9rem;
        }
        .contentHead {
          padding: 1.5rem 1.3rem;
          background-color: #fff;
          margin-bottom: 0.5rem;
          position: relative;
        }
        .contentHead .class_share{
          position: absolute;
          top:0;
          right:0;
        }
        .contentRMB {
          color: #333333;
          font-size: 1.7rem;
          font-weight: bold;
          line-height: 1;
        }
        .contentRMB span{
          font-size: 2.3rem;
          line-height: 1.75rem;
          font-weight: bold;
        }
        .contentRMB span.cuxiao{
          font-size: 0.9rem;
          color: #ed6a20;
          background-color: #ffeae1;
          border-radius: 0.6rem;
          line-height: 1;
          vertical-align: middle;
          padding: 0.25rem 0.4rem;
        }
        .contentHead > .contentTitle {
          font-size: 1.5rem;
          color: #333;
          margin: 1.5rem 0 0;
          line-height: 2rem;
          /*width:78%;*/
          padding-right:22%;
          font-weight: bold;
          position: relative;
        }
        .contentHead > .contentTitle span{
          font-size:1.2rem;
          color:#fff;
          line-height: 1;
          background: #ed6a20;
          padding:0.2rem 0.35rem;
          border-radius: 0.2rem;
          margin-right:0.6rem;
        }
        .contentHead > .contentTitle .class_share{
          position: absolute;
          top:0;
          right:0;
        }
        .contentHead > .contentTitle .class_share img{
          width:2rem;
          margin:0 auto;
        }
        .contentHead > .contentTitle .class_share span{
          font-size: 1.1rem;
        	font-weight: normal;
        	font-stretch: normal;
        	letter-spacing: 0rem;
        	color: #666666;
          background:#fff;
          margin-right: 0;
          padding:0;
        }
        .contentLAB{
          font-size:1.3rem;
          line-height: 1;
          color:#ed6a20;
          margin-top:1.1rem;
        }
        .contentHead_bot {
          border-top:1rem solid #f2f2f2;
          border-bottom:1rem solid #f2f2f2;
          padding:1.4rem 1.3rem;
        }
        .contentHead_bot {
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          -webkit-box-orient: vertical;
          box-orient: vertical;
          -webkit-box-pack: justify;
          -webkit-justify-content: space-between;
          justify-content: space-between;
          -webkit-box-align: start;
          -webkit-align-items: flex-start;
          align-items: flex-start;
          font-size: 1.3rem;
          color: #999;
          line-height: 1;
        }
        .contentHead_bot div{
          color:#999;
          font-size: 1.3rem;
        }
        .content_ul {
          padding: 0 1.3rem;
          background-color: #fff;
          border-bottom: 1rem solid #f2f2f2;
        }
        .content_ul li {
          padding: 1.55rem 0;
          border-bottom: 1px solid #e5e5e5;
          position: relative;
        }
        .content_ul li:after {
          content: '';
          display: block;
          clear: both;
        }
        .content_ul li:last-of-type {
          border-bottom: none;
        }
        .content_ulLeft {
          /*width:2rem;*/
          font-size: 1.3rem;
          color: #999;
          float: left;
          line-height: 1.7rem;
        }
        .content_con {
          color: #999;
          font-size: 1.3rem;
          line-height: 1.7rem;
          float: left;
          width: calc(100% - 7rem);
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          margin-left: 0.5rem;
          text-overflow: ellipsis;
        }
        .content_Right {
          float: right;
          /*width: 0.5rem;*/
          font-size: 1.0rem;
          vertical-align: middle;
        }
        .content_Right i{
          font-size: 0.9rem;
        }

        .content_foot {
          padding: 1.5rem 1.3rem 2rem;
          background-color: #fff;
          border-bottom: 1rem solid #f2f2f2;
        }
        .content_foot:after,.footer:after {
          content: '';
          display: block;
          clear: both;
        }
        .content_footImg {
          width: 5rem;
          height: 5rem;
          margin-right: 1rem;
          border: 1px solid #e5e5e5;
          float: left;
        }
        .content_footTxt {
          height: 5rem;
          width: calc(100% - 6rem);
          float: left;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
        }
        .content_footTxt h4 {
          font-size: 1.5rem;
          line-height: 1;
          color: #000000;
          letter-spacing: 0.03rem;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .content_footTxt p {
          font-size: 1.3rem;
          line-height: 1;
          color: #666666;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .footer {
          height: 4.8rem;
          position: fixed;
          bottom: 0;
          left: 0;
          width: 100%;
          background-color: #fff;
          box-shadow: 0px 0px 1rem 0px rgba(0,0,0,0.05)
        }
        .footer_left {
          height: 100%;
          float: left;
          width: 45%;
          padding: 0.85rem 0;
        }
        .footer_left > div {
          width: 33.333%;
          float: left;
          height: 100%;
          color: #000000;
          font-size: 1rem;
          line-height: 1;
          text-align: center;
          display: flex;
          flex-direction: column;
          justify-content: center;
          border-right: 1px solid rgba(0,0,0,0.15);
        }
        .footer_left > div:last-of-type {
          border-right: none;
        }
        .footer_left > div > img {
          height:1.7rem;
          margin: 0 auto 0.35rem;
        }
        .footer_right {
          height: 100%;
          float: left;
          width: 55%;
        }
        .footer_rightL,.footer_rightR {
          width: 50%;
          height: 100%;
          float: left;
          text-align: center;
          overflow: hidden;
        }
        .footer_rightL {
          background-image: linear-gradient(-90deg,#ff9501 0%,#ffb001 48%,#ffca00 100%),linear-gradient(90deg,#79c735 0%,#65a032 100%);
          background-blend-mode: normal,normal;
          color: #fff;
          font-size: 1.6rem;
          line-height: 4.8rem;
        }
        .footer_rightR {
          background-image: linear-gradient(-90deg,
      		#ff4e18 0%,
      		#f9280d 52%,
      		#f20101 100%),
      	linear-gradient(
      		#ff8600,
      		#ff8600);
      	background-blend-mode: normal,
      		normal;
          color: #fff;
          font-size: 1.6rem;
          line-height: 4.8rem;
        }
        /**pingjia**/
        .content_pinglun{
          padding: 0 1.3rem 2rem;
          border-bottom: 1rem solid #f2f2f2;
        }
        .content_pinglun_title{
          padding:1.4rem 0;
          border-bottom: 1px solid #e5e5e5;
        }
        .fl{
          float:left;
        }
        .fr{
          float:right;
        }
        .content_pinglun_title span.left{
          font-size:1.4rem;
          line-height: 1;
          color:#000;
        }
        .content_pinglun_title span.right{
          font-size:1.4rem;
          line-height: 1;
          color:#ed6a20;
        }
        .content_pinglun .aui-list-item-media{
          width:3rem;
        }
        .content_pinglun .aui-list-item-arrow{
          font-size:1.4rem;
          color:#000000;
          line-height: 3rem;
          padding-left:1.15rem;
          padding-right:0;
        }
        .content_pinglun>ul>li{
          padding:1.55rem 0 1rem;
          border-bottom: 1px solid #e5e5e5;
        }
        .content_pinglun>ul>li:last-child{
          border-bottom: none;
        }
        .content_pinglun_img{
          margin-top:1rem;
        }
        .content_pinglun_img ul{
          margin-right:-0.25rem;
          margin-left:-0.25rem;
        }
        .content_pinglun_img ul li{
          width:33.3333%;
          float:left;
          padding-left:0.25rem;
          padding-right:0.25rem;
        }
        .content_pinglun_content{
          font-size:1.3rem;
          color:#000000;
          line-height: 1.75rem;
	        letter-spacing: 0.02rem;
          margin-top: 1rem;
        }
        .content_pinglun_bot_left{
          font-size:1.3rem;
          line-height: 1;
          color:#666666;
          margin-top:0.9rem;
        }
        .content_pinglun_bot_right1{
          display: inline-block;
          margin-left:1.5rem;
          margin-top:0.6rem;
        }
        .content_pinglun_bot_right1 img{
          display: inline-block;
          vertical-align: middle;
        }
        .content_pinglun_bot_right1 span{
          display: inline-block;
          vertical-align: middle;
          font-size:1.3rem;
          color:#000000;
          opacity: 0.6;
          line-height: 1;
          margin-left:0.8rem;
        }
        .content_pinglun_bot_right2 img{
          width: 1.55rem;
        }
        .content_pinglun_bot_right3 img{
          width: 1.2rem;
        }
        .content_pinglun_more{
          width:100%;
          height:3rem;
          line-height: 3rem;
          font-size: 1.3rem;
        	font-weight: normal;
        	font-stretch: normal;
        	letter-spacing: 0.03rem;
        	color: #333333;
          text-align: center;
          border-radius: 0.5rem;
        	border: solid 0.05rem #7d7d7d;
        	opacity: 0.73;
        }
        .content_foot2{
          margin-top:1.4rem;
        }
        .content_foot2 ul li{
          float:left;
          width:33.33%;
          text-align: center;
          position: relative;
          /*border-right: 0.05rem solid #e5e5e5;*/
        }
        .content_foot2 ul li::after{
          content:'';
          position: absolute;
          width:1px;
          height:70%;
          top:15%;
          right:0;
          background:#eee;
        }
        .content_foot2 ul li:last-child::after{
          height:0;
        }
        .content_foot2 ul li h5{
          font-size: 1.6rem;
        	font-weight: normal;
        	font-stretch: normal;
        	letter-spacing: 0.03rem;
        	color: #000000;
          line-height: 1;
        }
        .content_foot2 ul li p{
          font-size: 1.3rem;
          line-height: 1;
        	font-weight: normal;
        	font-stretch: normal;
        	letter-spacing: 0.03rem;
        	color: #666666;
          margin-top:1.5rem;
        }
        .content_foot3{
          margin-top:1.5rem;
        }
        .content_foot3_img{
          width:calc(100% - 11rem);
          height:10rem;
          background:url(../../image/class/class_detail_shop1.jpg) center center/cover no-repeat;
          float:left;
        }
        .content_foot3_txt{
          float:left;
          width:10.5rem;
          margin-left:0.5rem;
          height:10rem;
          display: flex;
          flex-direction: column;;
          justify-content: space-between;
        }
        .content_foot3_txt p{
          display: block;
          width:100%;
          height: 3rem;
          line-height: 3rem;
          color:#333333;
          font-size:1.2rem;
          text-align: center;
        	background-color: #f8f8f8;
        	border-radius: 0.3rem;
        }
        .content_foot4{
          margin-top:1.7rem;
          height:3rem;
        }
        .content_foot4_btn{
          width:48%;
          height:3rem;
          border-radius: 0.25rem;
        	border: solid 0.05rem rgba(0,0,0,0.3);
        	/*opacity: 0.3;*/
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .content_foot4_btn img{
          display: inline-block;
          width:1.5rem;
          vertical-align: middle;
        }
        .content_foot4_btn span{
          display: inline-block;
          vertical-align: middle;
          font-size:1.4rem;
          color:#4c4c4c;
          line-height: 1;
          margin-left:0.75rem;
        }
        .content_details_title{
          padding:1.3rem;
          line-height: 1;
          font-size:1.4rem;
          color:#000000;
        }
        .content_details_title span{
          color:#cecece;
          margin-left:0.75rem;
        }
        .content_details_img{
          margin-bottom: 4.8rem;
        }
        .content_details_img1{
          margin-bottom: 1rem;
        }
        .detail_pingjia_f1_start{
          display: inline-block;
          width:1rem;
          height:1rem;
          background:url(../../image/class/start1.png) center center/cover no-repeat;
        }
        .detail_pingjia_f1_start1{
          display: inline-block;
          width:1rem;
          height:1rem;
          background:url(../../image/class/start.png) center center/cover no-repeat;
        }
        .pingjia_name{
          width:calc(100% - 11rem);
        }
        .pingjia_star{
          width:8rem;
        }

        /**商品参数**/
        .detail_canshu{
          position: fixed;
          width:100%;
          height: 100%;
          top:0;
          left:0;
          z-index: 8;
        }
        .detail_canshu_bg{
           position: fixed;
           width:100%;
           height: 100%;
           background:#333;
           opacity: 0.6;
           top:0;
           left:0;
           z-index: 10;
        }
        .detail_canshu_con{
          position: absolute;
          bottom:0;
          left:0;
          width:100%;
          z-index: 11;
          background:#fff;
          padding:2.4rem 1.3rem 1.5rem;
          border-radius: 1rem 1rem 0 0;
        }
        .detail_canshu_con_title{
          font-size:1.6rem;
          color:#555555;
          line-height: 1;
          text-align: center;
        }
        .detail_canshu_con_list ul li{
          padding:1.7rem 0;
          border-bottom: 1px solid #e5e5e5;
          position: relative;
          /*font-size:1.4rem;
          color:#333333;
          line-height: 1;*/
        }
        .detail_canshu_con_list ul li:last-child{
          border-bottom: none;
        }
        .detail_canshu_con_list ul li span.title{
          display: inline-block;
          font-size:1.4rem;
          color:#999999;
          line-height: 1;
          width:5.65rem;
          vertical-align: middle;
          line-height: 1.65rem;
        }
        .detail_canshu_con_list ul li span.txt{
          display: inline-block;
          font-size:1.4rem;
          color:#333333;
          line-height: 1;
          margin-left:3rem;
          vertical-align: middle;
        }
        .detail_canshu_con_btn{
          width:100%;
          height: 4rem;
        	background-color: #ed6a20;
        	border-radius: 1.98rem;
          color:#fff;
          text-align: center;
          line-height: 4rem;
          font-size:1.6rem;
          margin-top:1.7rem;
        }
        /**商品参数**/

        /**商品尺寸**/
        .detail_size_con{
          position: absolute;
          width:100%;
          height:46rem;
          overflow: auto;
          background: #fff;
          border-radius: 1rem 1rem 0 0;
          bottom: 0;
          left: 0;
          z-index: 11;
        }
        .detail_size_con1{
          width:100%;
          padding:1.5rem;
        }
        .detail_size_con_f1_left{
          width:10rem;
          height:10rem;
          float:left;
        }
        .detail_size_con_f1_right{
          width:calc(100% - 11.5rem);
          margin-left:1.5rem;
          height:10rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          float:left;
        }
        .detail_size_con_f1_right1{
          font-size:1.3rem;
          color:#ed6a20;
          letter-spacing: 0.03rem;
        }
        .detail_size_con_f1_right1 span{
          font-size:1.6rem;
          color:#ed6a20;
          letter-spacing: 0.03rem;
          line-height: 1;
        }
        .detail_size_con_f1_right2{
          font-size:1.2rem;
          color:#333333;
          line-height: 1;
          margin-top:1.3rem;
        }
        .detail_size_con_f1_right3{
          font-size:1.2rem;
          color:#333333;
          line-height: 1;
          margin-top:1.3rem;
        }
        .detail_size_con_f2{
          margin-top:2rem;
        }
        .detail_size_con_f2_title{
           font-size:1.3rem;
           color:#333;
           line-height: 1;
           margin-bottom: 0.9rem;
        }
        .detail_size_con_f2_label span{
          min-width: 7.2rem;
          /*height:2.8rem;*/
          font-size:1.2rem;
          color:#333333;
          line-height: 1;
          text-align: center;
          padding:1rem;
          background-color: #eeeeee;
	        border-radius: 1.4rem;
          margin-bottom: 1.5rem;
          margin-right:1.2rem;
        }
        .detail_size_con_f2_label span.active{
          background-color: #ed6a20;
	        color:#fff;
        }
        .detail_size_con_num{
          margin-top:1.7rem;
        }
        .detail_size_con_num1{
          font-size:1.3rem;
          color:#333;
          line-height: 1;
        }
        .detail_size_con_num2 span{
          font-size: 1.5rem;
          margin: 0 0.2rem;
        }
        .detail_size_con_num2 input{
          display: inline-block;
          width: 3.6rem;
        	height: 2.1rem;
        	background-color: #f6f6f6;
          text-align: center;
          line-height: 2.1rem;
          border:none;
          font-size:1.3rem;
          color:#333;
        }
        .detail_size_con_btn{
          position: fixed;
          z-index: 12;
          bottom:0;
          left:0;
          width:100%;
          height:4.8rem;
          line-height: 4.8rem;
          text-align: center;
          color:#ffffff;
          font-size:1.5rem;
          background-image: linear-gradient(-90deg,
        		#ff4e18 0%,
        		#f9280d 52%,
        		#f20101 100%),
        	linear-gradient(
        		#f82706,
        		#f82706);
        	background-blend-mode: normal,
        		normal;
        }
        .detail_size_con_close{
          width:2rem;
          height:2rem;
          position: absolute;
          top:1.5rem;
          right:1.5rem;
        }
        /**商品尺寸**/
        [v-cloak] {
            display: none;
        }

    </style>
</head>

<body>
  <div class="box" id="app" v-cloak>
    <div class="detail_canshu" v-if="flag1">
      <div class="detail_canshu_bg" @click="flag1=false;"></div>
      <div class="detail_canshu_con">
        <div class="detail_canshu_con_title">产品参数</div>
        <div class="detail_canshu_con_list">
          <ul>
            <li v-for="items6 in goodsInfo.goods_attr">
              <span class="title">{{items6.key}}</span>
              <span class="txt">{{items6.value}}</span>
            </li>
            <!-- <li>
              <span class="title">规格</span>
              <span class="txt">正常规格</span>
            </li>
            <li>
              <span class="title">功效</span>
              <span class="txt">深层补水，改善皮肤</span>
            </li>
            <li>
              <span class="title">净含量</span>
              <span class="txt">50g/mL</span>
            </li>
            <li>
              <span class="title">品牌</span>
              <span class="txt">Whoo</span>
            </li>
            <li>
              <span class="title">产地</span>
              <span class="txt">韩国</span>
            </li>
            <li>
              <span class="title">是否为特殊用途</span>
              <span class="txt">否</span>
            </li>
            <li>
              <span class="title">保质期</span>
              <span class="txt">36个月</span>
            </li> -->
          </ul>
        </div>
        <div class="detail_canshu_con_btn" @click="flag1=false;">完成</div>
      </div>
    </div>
    <div class="aui-refresh-content">
    <div id="swiper_banner" class="swiper-container">
        <div class="swiper-wrapper">
            <!-- <div class="swiper-slide" style="background:url(../../image/class/swiper_ban.jpg) center center/cover no-repeat;"></div>
            <div class="swiper-slide" style="background:url(../../image/mall/swiper_ban.jpg) center center/cover no-repeat;"></div> -->
            <div class="swiper-slide" v-for="items1 in goodsInfo.banner">
              <img :src="items1" alt="" width="100%">
            </div>
            <!-- <div class="swiper-slide">
              <img src="../../image/class/class_detail_banner_1.png" alt="" width="100%">
            </div> -->
        </div>
        <div class="swiper-pagination pagination_banner"></div>
    </div>

    <div class="contentHead">
      <div class="contentRMB">
        <span>￥{{parseInt(goodsInfo.goods_price)}}</span>.00
        <span class="cuxiao">优惠促销</span>
      </div>
      <div class="contentTitle">
        <span>{{goodsInfoStore.store_type}}</span>{{goodsInfo.goods_name}}
        <div class="class_share" @click="shareShow()">
          <img src="../../image/class/class_share1.png" alt="">
          <span>分享有赏</span>
        </div>
      </div>
      <div class="contentLAB">
        {{goodsInfo.goods_desc}}
      </div>
    </div>
    <div class="contentHead_bot">
      <div>快递：{{goodsInfo.express_fee}}</div>
      <div>月销{{goodsInfo.sales}}笔</div>
      <div>{{goodsInfo.product}}</div>
    </div>

    <ul class="content_ul">
      <li>
        <div class="content_ulLeft">正品保证 极速退款 七天退换</div>
      </li>
      <li @click="canshuShow()">
        <div class="content_ulLeft">商品参数</div> <div class="content_con"></div> <div class="content_Right"><i class="aui-iconfont aui-icon-right"></i></div>
      </li>
      <li @click="getSkuList(1)">
        <div class="content_ulLeft">请选择</div> <div class="content_con">商品颜色，尺码</div><div class="content_Right"><i class="aui-iconfont aui-icon-right"></i></div>
      </li>
    </ul>

    <div class="content_pinglun">
      <div class="content_pinglun_title clearfix"><span class="fl left">评价（{{goodsInfoComment.comment_nums}}）</span><span class="fr right">好评度{{goodsInfoComment.best_percent}} <i class="aui-iconfont aui-icon-right"></i></span></div>
      <ul>
        <li v-for="items2 in goodsInfoComment.comment_list">
          <div class="aui-media-list-item-inner">
              <div class="aui-list-item-media">
                  <img :src="items2.user_headlogo" class="aui-img-round aui-list-img-sm" width="100%">
              </div>
              <div class="aui-list-item-inner aui-list-item-arrow">
                  {{items2.username}}
              </div>
              <div class="aui-list-item-inner aui-list-item-arrow">
                <i class="detail_pingjia_f1_start"></i>
                <i class="detail_pingjia_f1_start"></i>
                <i class="detail_pingjia_f1_start"></i>
                <i class="detail_pingjia_f1_start"></i>
                <i class="detail_pingjia_f1_start1"></i>
              </div>
          </div>
          <div class="content_pinglun_content">{{items2.content}}</div>
          <div class="content_pinglun_img">
            <ul class="clearfix">
              <li v-for="items3 in items2.pic_list">
                <img :src="items3" alt="" width="100%">
              </li>
              <!-- <li>
                <img src="../../image/class/class_detail_pinglun_3.png" alt="">
              </li>
              <li>
                <img src="../../image/class/class_detail_pinglun_2.png" alt="">
              </li> -->
            </ul>
          </div>
          <div class="content_pinglun_bot clearfix">
            <div class="content_pinglun_bot_left fl">{{items2.goods_skuinfo}} x{{items2.goods_nums}}</div>
            <div class="content_pinglun_bot_right fr">
              <div class="content_pinglun_bot_right1 content_pinglun_bot_right2"><img src="../../image/class/class_detail_pinglun_4.png" alt=""><span>{{items2.comment_like_num==''?'0':items2.comment_like_num}}</span></div>
              <div class="content_pinglun_bot_right1 content_pinglun_bot_right3"><img src="../../image/class/class_detail_pinglun_5.png" alt=""><span>{{items2.comment_comment_num==''?'0':items2.comment_comment_num}}</span></div>
            </div>
          </div>
        </li>
        <!-- <li>
          <div class="aui-media-list-item-inner">
              <div class="aui-list-item-media">
                  <img src="../../image/class/class_detail_pinglun_1.png" class="aui-img-round aui-list-img-sm" width="100%">
              </div>
              <div class="aui-list-item-inner aui-list-item-arrow">
                  流浪男
              </div>
          </div>
          <div class="content_pinglun_content">之前客服打电话说从韩国发货，需要身份证验证，原以为需要很长时间才到，没想到那么快，服务态度好，商品很喜欢</div>
          <div class="content_pinglun_img">
            <ul class="clearfix">
              <li>
                <img src="../../image/class/class_detail_pinglun_2.png" alt="">
              </li>
              <li>
                <img src="../../image/class/class_detail_pinglun_3.png" alt="">
              </li>
              <li>
                <img src="../../image/class/class_detail_pinglun_2.png" alt="">
              </li>
            </ul>
          </div>
          <div class="content_pinglun_bot clearfix">
            <div class="content_pinglun_bot_left fl">护肤套装 x1</div>
            <div class="content_pinglun_bot_right fr">
              <div class="content_pinglun_bot_right1 content_pinglun_bot_right2"><img src="../../image/class/class_detail_pinglun_4.png" alt=""><span>498</span></div>
              <div class="content_pinglun_bot_right1 content_pinglun_bot_right3"><img src="../../image/class/class_detail_pinglun_5.png" alt=""><span>498</span></div>
            </div>
          </div>
        </li> -->
      </ul>
      <div class="content_pinglun_more">查看全部{{goodsInfoComment.comment_nums}}评价</div>
    </div>

    <div class="content_foot">
      <div class="content_foot1 clearfix">
        <div class="content_footImg" :style="'background:url(' + goodsInfoStore.store_logo + ') center center/cover no-repeat;'"></div>
        <div class="content_footTxt">
          <h4>{{goodsInfoStore.store_name}}</h4>
          <p>{{goodsInfoStore.store_desc}}</p>
        </div>
      </div>
      <div class="content_foot2">
        <ul class="clearfix">
          <li>
            <h5>{{goodsInfoStore.store_goods_all_num}}</h5>
            <p>全部商品</p>
          </li>
          <li>
            <h5>{{goodsInfoStore.store_goods_new_num}}</h5>
            <p>店铺新品</p>
          </li>
          <li>
            <h5>{{goodsInfoStore.collection}}</h5>
            <p>收藏人数</p>
          </li>
        </ul>
      </div>
      <div class="content_foot3 clearfix">
        <div class="content_foot3_img" :style="'background:url(' + goodsInfoStore.banner_pic + ') center center/cover no-repeat;'">
        </div>
        <div class="content_foot3_txt">
          <p>超强补水</p>
          <p>美白肌肤</p>
          <p>护肤之美</p>
        </div>
      </div>
      <div class="content_foot4 clearfix">
        <div class="content_foot4_btn fl">
          <img src="../../image/class/class_detail_pinglun_71.png" alt="" v-if="goodsInfo.is_collect == 0">
          <img src="../../image/class/class_detail_pinglun_7.png" alt="" v-else>
          <span>点击收藏</span>
        </div>
        <div class="content_foot4_btn fr">
          <img src="../../image/class/class_detail_pinglun_8.png" alt="">
          <span>进店逛逛</span>
        </div>
      </div>
    </div>
    <div class="content_details">
      <div class="content_details_title">图文详情 <span>点击图片可放大</span></div>
      <div class="content_details_img">
        <div class="content_xqcont">
            <iframe :src="goodsInfo.goods_detail_url" style="width: 100%;border:none;" id="cnt_iframe" iframeborder="0"></iframe>
        </div>
        <!-- <img src="../../image/class/class_detail_img1.png" alt="" width="100%" class="content_details_img1">
        <img src="../../image/class/class_detail_img2.png" alt="" width="100%">
        <img src="../../image/class/class_detail_img3.png" alt="" width="100%">
        <img src="../../image/class/class_detail_img4.png" alt="" width="100%"> -->
      </div>
    </div>
    </div>
    <div class="footer">
      <div class="footer_left">
        <div  @click="shopShow()">
          <img src="../../image/class/footer_left1.png" alt="">
          店铺
        </div>
        <div @click="chatShow()">
          <img src="../../image/class/footer_left2.png" alt="">
          客服
        </div>
        <div>
          <img src="../../image/class/footer_left31.png" alt="" v-if="goodsInfo.is_collect == 0">
          <img src="../../image/class/footer_left3.png" alt="" v-else>
          收藏
        </div>
      </div>
      <div class="footer_right">
        <div class="footer_rightL" @click="getSkuList(1)">加入购物车</div>
        <!-- <div class="footer_rightL" @click="flag2=true;">加入购物车</div> -->
        <div class="footer_rightR" @click="getSkuList(2)">立即购买</div>
      </div>
    </div>

  </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<!-- <script type="text/javascript" src="../../script/zepto.js"></script> -->
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/axios.min.js"></script>
<script type="text/javascript" src="../../script/axios-config.js"></script>
<script type="text/javascript">

    apiready = function() {

      var app = new Vue({
          el: '#app',
          data: {
            flag1:false,
            flag2:false,
            goodsId:'',
            goodsInfo:[],
            goodsInfoStore:[],
            goodsInfoComment:[],
            goodsSkuInfo:[],
            goods_ps:[],
            goods_ps1:[],
            goods_ps_cont:[],
            token:'',
            num:1
          },
          created: function() {
            var $_this=this;
            api.showProgress({
                title: '努力加载中...',
                text: '先喝杯茶...',
                modal: false
            });

            $_this.getDetail();
            // $_this.getSkuList();
          },
          methods: {
            canshuShow:function(){
              this.flag1=true;
            },
            getDetail:function(){
              var $_this=this;
              api.showProgress({
                  title: '努力加载中...',
                  text: '先喝杯茶...',
                  modal: false
              });

              if(api.pageParam.goodsId){
                $_this.goodsId=api.pageParam.goodsId;
              }

              if($api.getStorage('token')){
                $_this.token=$api.getStorage('token');
              }
              console.log($_this.goodsId);

              const data = {
                 token:$_this.token,
                 goods_id:$_this.goodsId
              }
              Axios.post(window.Url.goods_info,data).then(function(res){
                if(res.status==1){
                  // api.hideProgress();
                  // console.log(JSON.stringify(res))
                  $_this.goodsInfo=res;
                  $_this.goodsInfoStore=res.store_info;
                  $_this.goodsInfoComment=res.comment_info;
                  $_this.$nextTick(function () {
                    bannerSwiper();
                    setIframeHeight();
                  })
                }else{
                  api.toast({
                      msg:res,
                      duration: 2000,
                      location: 'bottom'
                  });
                }
              }).catch((err) => {
                api.alert({ msg: JSON.stringify(err) });
              })
            },
            getSkuList:function(type){
              var $_this=this;
              if($_this.goodsInfo.is_sku == 0){
                $_this.goSubmit(type);
              }else if($_this.goodsInfo.is_sku == 1){
                  api.openFrame({
                      name: 'mallPurse',
                      url: './mall_purse.html',
                      pageParam:{
                        type:type,
                        goodsId:$_this.goodsId
                      }
                  })
              }

            },
            goSubmit:function(type){
              var $_this=this;
              if(type == 1){
                const data = {
                   token:$_this.token,
                   goods_id:$_this.goodsId,
                   sku_id:'',
                   goods_nums:1
                }
                Axios.post(window.Url.add_cart,data).then(function(res){
                  if(res.status==1){
                    alert(res.info)
                  }else{
                    api.toast({
                        msg:res,
                        duration: 2000,
                        location: 'bottom'
                    });
                  }
                }).catch((err) => {
                  api.alert({ msg: JSON.stringify(err) });
                })
              }else if(type == 2){
                api.openWin({
                    name: 'orderTrue',
                    url: '../cart/order_true.html',
                    pageParam: {
                        type: 1,
                        goods_id:$_this.goodsId,
                        sku_id:'',
                        goods_nums:1
                    }
                });
              }

            },
            buyNow: function(type, id) {
                var $_this = this;
                const data = {
                   token:$_this.token,
                   goods_id:$_this.goodsId,
                   sku_id:'',
                   goods_nums:1
                }
                Axios.post(window.Url.add_cart,data).then(function(res){
                  if(res.status==1){
                    // alert(res.info)
                  }else{
                    api.toast({
                        msg:res,
                        duration: 2000,
                        location: 'bottom'
                    });
                  }
                }).catch((err) => {
                  api.alert({ msg: JSON.stringify(err) });
                })
            },
            shareShow: function(){
              var $_this=this;
                api.openFrame({
                    name: 'share',
                    url: './share.html',
                    pageParam:{
                      goodsid:$_this.goodsId
                    }
                })
            }
          },
          mounted: function () {
            api.hideProgress();
            setRefresh();
          }
        })

    };

    function bannerSwiper(){
      var bannerSwiper = new Swiper('#swiper_banner', {
          autoplay: 3000,
          loop: true,
          pagination: '.pagination_banner',
          paginationType: 'fraction',
      })
    }

    //刷新
    function setRefresh(){
        var pullRefresh = new auiPullToRefresh({
            container: document.querySelector('.aui-refresh-content'),
            triggerDistance: 100
        }, function(ret) {

            if (ret.status == "success") {
                setTimeout(function() {
                    pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                }, 1500)
            }
        })
    }

    //打开客服页面
    function chatShow(){
      api.openWin({
          name: 'singleChatHeader',
          url: './single_chat_header.html',
          pageParam: {
              test:''
          }
      });
    }

    //打开店铺页面
    function shopShow(){
      api.openWin({
          name: 'shop',
          url: './shop.html',
          pageParam: {
              test:''
          }
      });
    }

    function setIframeHeight() {
        setTimeout(function(){
          var iframe_height = $("#cnt_iframe").contents().find("#content").height();
          $('#cnt_iframe').height(iframe_height+20);
        },500);
    };

</script>

</html>
